<template>
  <!-- 地图页面 -->
  <div v-show="isTwoD" id="map" class="map"></div>
  <three-d v-if="!isTwoD"></three-d>
  <div id="popup" class="ol-popup" v-show="isVi">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content">
      事件类型:
      <p>{{ event.value ? event.value['事件类型'] : '' }}</p>
      事件等级:
      <p>{{ event.value ? event.value['事件等级'] : '' }}</p>
      发生地点:
      <p>{{ event.value ? event.value['发生地点'] : '' }}</p>
      发生时间:
      <p>{{ event.value ? event.value['发生时间'] : '' }}</p>
    </div>
  </div>
  <switch-layer
    :show="showSwi"
    @close="fclosePopup"
    :basemap="selMap.value"
    @display="(e) => displayLay(e, selMap.value)"
    @getView="
      (e) => {
        isTwoD = e == 0
      }
    "
  ></switch-layer>
  <tools-layer
    :show="showTools"
    @close="fclosePopup(selMap.value)"
    :basemap="selMap.value"
    @addPnt="(e) => addPnt(e, selMap.value)"
    @meaD="(e) => meaD(e, selMap.value)"
    @meaA="(e) => meaA(e, selMap.value)"
    @clm="(e) => clm(e, selMap.value)"
    @cancel="(e) => cancel(e, selMap.value)"
    @expor="(e) => exportImg(e, selMap.value)"
  ></tools-layer>

  <van-dialog v-model:show="showNot" title="施工公告">
    <notice-view></notice-view>
  </van-dialog>
  <div class="search">
    <search-view :basemap="selMap.value"></search-view>
  </div>
  <div class="sides">
    <div>
      <div class="side" @click="showLayPopup">图层</div>
      <div class="side" @click="showToolsPopup">工具箱</div>
      <div class="side" @click="showN">公告</div>
      <div
        class="side"
        @click="() => popUp(selMap.value, getEvents, (isVi = true))"
      >
        事件
      </div>
    </div>
  </div>
  <div class="locat">
    <van-icon name="aim" size="30px" @click="locate()" />
  </div>
  <div class="nav">
    <van-icon name="guide-o" size="40px" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue'
import SwitchLayer from '../../components/SwitchLayer.vue'
import ToolsLayer from '../../components/ToolsLayer.vue'
import SearchView from '../../components/SearchView.vue'
import NoticeView from '../../components/NoticeView.vue'
import ThreeD from '../../views/three-d.vue'
import { initMap } from '../../map/map'
import { addPnt } from '../../map/addPoint'
import { meaD } from '../../map/meaDistance'
import { meaA } from '../../map/meaArea'
import { clm } from '../../map/clearMea'
import { cancel } from '../../map/cancelColl'
import { exportImg } from '../../map/exportImg'
import { displayLay } from '../../map/displayLay'
import { displayView } from '../../map/displayView'
import { popUp } from '../../map/popUp'
import {
  tools,
  showLayPopup,
  showToolsPopup,
  showSwi,
  showTools,
  fclosePopup,
} from './map-data.js'
const showNot = ref(false)
const isTwoD = ref(true)
const isVi = ref(false)
const active = ref(0)
const value = ref('')
const showN = () => {
  showNot.value = true
}
const locate = () => {
  // console.log('fgx')
  navigator.geolocation.getCurrentPosition(function (position) {
    // console.log('1111')
    // console.log(position)
    selMap.value
      .getView()
      .setCenter([position.coords.longitude, position.coords.latitude])
    selMap.value.getView().setZoom(11) //放大级别
  })
}
const selMap = reactive({})
const event = reactive({})
const getEvents = (feature) => {
  event.value = feature
  // console.log(event.value)
}
onMounted(() => {
  selMap.value = initMap()
})
watch(isTwoD, () => {
  if (isTwoD.value) {
    // console.log(isTwoD)
    // console.log(selMap.value)
  }
})
</script>

<style>
@import './map-view.css';
</style>
